<template>
  <div class="selectAddress">
    <CDWHeader
      title="选择取货地址"
      rightText="确认"
      @click-right="clickRight"
    />
    <div class="pages">
      <template v-if="listsData.length > 0">
        <div class="item-box" v-for="item in listsData" :key="item.addressId">
          <div class="icon-img" v-if="item.img == false">
            <img src="@/assets/address.png" alt="" width="32px" />
          </div>
          <div class="icon-img" v-if="item.img == true">
            <img src="@/assets/address-on.png" alt="" width="32px" />
          </div>
          <div class="item-address">{{ item.address }}</div>
          <div class="item-radio">
            <van-radio-group v-model="radio">
              <van-radio :name="item.addressId" @click="radioClick"></van-radio>
            </van-radio-group>
          </div>
        </div>
      </template>
      <template v-else>
        <van-list :finished="finished" finished-text="没有更多了"> </van-list>
      </template>
    </div>
  </div>
</template>

<script>
import CDWHeader from "@/components/header";
export default {
  name: "selectAddress",
  components: {
    CDWHeader,
  },
  data() {
    return {
      radio: "",
      listsData: [],
      addressName: "",
      goodsId: this.$route.query.goodsId,
      addressId: "",
      finished: true,
    };
  },
  created() {
    this.getAddressList();
  },
  methods: {
    radioClick() {
      this.listsData.map((item) => {
        if (this.radio == item.addressId) {
          item.img = true;
          this.addressName = item.address;
          this.addressId = item.addressId;
        } else {
          item.img = false;
        }
      });
    },
    clickRight() {
      if(this.addressName || this.addressId){
        let query = {
          goodsId: this.goodsId,
          addressName: this.addressName,
          addressId: this.addressId,
          username: this.$route.query.username,
          phone: this.$route.query.phone,
          addressState: this.$route.query.addressState,
          goodsNum: this.$route.query.num,
          goodstypeCode: this.$route.query.shipType,
        };
        this.$router.push({ path: "/acknowledgementOfOrder", query });
      }else{
        this.$toast("请选择一个地址确认");
      }
    },
    getAddressList() {
      this.$http
        .get(`/api/goods/address/query?goodsId=${this.goodsId}`)
        .then((res) => {
          let data = res.data;
          data.map((item) => {
            item.img = false;
          });
          if (data.size > 0) {
            data[0].img = true;
            this.radio = data[0].addressId;
            this.addressName = res.data[0].address;
          }
          this.listsData = data;
        });
    },
  },
};
</script>
<style scoped lang="less">
.pages {
  margin-top: 12px;
  .item-box {
    background: #fff;
    border-radius: 10px;
    height: 72px;
    width: 100%;
    display: flex;
    margin-bottom: 12px;
    .icon-img {
      display: flex;
      align-items: center;
      padding: 0 12px 0 12px;
    }
    .item-address {
      display: flex;
      align-items: center;
      flex: 1;
    }
    .item-radio {
      display: flex;
      align-items: center;
      padding-right: 12px;
    }
  }
}
</style>
